<template>
  <div class="supervisors-list">
      <div class="poup-box">
          <div class="close" @click="store.changeshowmah"></div>
          <div class="title setColor">麻将馆信息列表</div>
          <div class="xiaiaobox">
              <img class="xiabiao" src="../../../assets/namexiabiao.png" alt="">
          </div>
          <div class="check-box">
              <div class="left">
                  <!-- 麻将馆编号 -->
                  <input type="text" class="input" placeholder="请输入麻将馆编号" />
                  <!-- 麻将馆名称 -->
                  <input type="text" class="input" placeholder="请输入麻将馆名称" />
                  <!-- 位置 -->
                  <el-select v-model="value1" class="m-2" placeholder="位置">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                   <!-- 是否有营业执照 -->
                   <el-select v-model="value2" class="m-2" placeholder="营业执照">
                      <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                  <!-- 选择时间 -->
                  <div class="m-3">
                      <el-date-picker
                          v-model="valueTime"
                          type="datetimerange"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          format="YYYY-MM-DD HH:mm:ss"
                          date-format="YYYY/MM/DD ddd"
                          time-format="A hh:mm:ss"
                      />
                  </div>
                  <!-- 处置状态 -->
                  <el-select v-model="value4" class="m-2" placeholder="处置状态">
                      <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
              </div>
              <div class="right">
                  <!-- 搜索 -->
                  <button class="setColor1"></button>
                  <!-- 重置 -->
                  <button class="setColor2"></button>
              </div>
          </div>
          <div class="titlebox">
              <div class="item" v-for="(item, index) in titleList" :key="index">{{ item }}</div>
          </div>
          <div class="conlist">
              <div class="item" v-for="(item, index) in list" :key="index">
                  <div class="text">{{ index+1 }}</div>
                  <div class="text">{{ item.name }}</div>
                  <div class="text">{{ item.seName }}</div>
                  <div class="text">{{ item.yijian }}</div>
                  <div class="text">{{ item.state }}</div>
                  <div class="text">{{ item.operation }}</div>
                  <div class="text">{{ item.state1 }}</div>
                  <div class="text">{{ item.operation1 }}</div>
                  <div class="text">{{ item.fff }}</div>
                  <div class="text">{{ item.status }}</div>
              </div>
          </div>
          <div class="superpagenumber">
              <span class="span">共{{ total }}条数据</span>
              <el-pagination class="my-page" v-model:page-size="pageSize3" :background="background"
                  layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange" />
          </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let titleList = ref(['序号', '麻将馆编号', '麻将馆名称', '位置', '是否有营业执照', '经营人', '经营人联系方式', '被投诉次数', '创建时间', '状态'])
let list = ref([
  { name: '0001', seName: '雀缘雅舍', yijian: '天星桥街道凤天花园', state: '是', operation: '李大刚', state1: '13101322561', operation1: '0',fff: '2025-03-02', status:'营业中' },
  { name: '0002', seName: '和悦轩', yijian: '西永街道雅豪丽景', state: '否', operation: '王大明', state1: '13896370589', operation1: '2',fff: '2025-02-02', status:'营业中'  },
  { name: '0003', seName: '胡麻好事', yijian: '沙坪坝街道巴蜀风云产业园', state: '否', operation: '雷宇', state1: '18983924895', operation1: '3',fff: '2025-01-02', status:'营业中'  },
  { name: '0004', seName: '四喜', yijian: '土湾街道科强锦龙苑', state: '否', operation: '辛甜', state1: '13101233987', operation1: '0',fff: '2024-12-02', status:'营业中'  },
  { name: '0005', seName: '福满堂', yijian: '新桥街道黄角湾小区', state: '是', operation: '刘晓华', state1: '18583893892', operation1: '0',fff: '2024-11-12', status:'营业中'  },
  { name: '0006', seName: '鸿运麻将馆', yijian: '覃家岗街道斌鑫胜景雅苑', state: '是', operation: '罗正阳', state1: '13893749023', operation1: '0',fff: '2024-10-18', status:'营业中'  },
  { name: '0007', seName: '如牌乐坊', yijian: '石井坡街道联芳花园·六期', state: '是', operation: '李萌', state1: '18723491345', operation1: '0',fff: '2024-10-18', status:'营业中'  },
  { name: '0008', seName: '清心居', yijian: '天星桥街道金阳易诚国际', state: '是', operation: '田明', state1: '18723763345', operation1: '0',fff: '2024-10-16', status:'营业中'  },
  { name: '0009', seName: '鸿运麻将馆', yijian: '天星桥街道金阳易诚国际', state: '是', operation: '李大钊', state1: '18723744345', operation1: '0',fff: '2024-5-16', status:'营业中'  },
])
const pageSize3 = ref(10)
const background = ref(true)
let total = ref(600)
const handleSizeChange = (val: any) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: any) => {
  console.log(`current page: ${val}`)
}

import { useCounterStore } from '@/stores/mahjong'
const store = useCounterStore()


const value1 = ref('')
const value2 = ref('')
const value4 = ref('')
const options1 = [
{
  value: '曾家镇',
  label: '曾家镇',
},
{
  value: '土主镇',
  label: '土主镇',
},
{
  value: '歌乐山镇',
  label: '歌乐山镇',
}
]
const options2 = [
{
  value: '有',
  label: '有',
},
{
  value: '无',
  label: '无',
}
]
const options4 = [
{
  value: '处置中',
  label: '处置中',
},
{
  value: '已办结',
  label: '已办结',
}
]
const valueTime = ref('')


</script>

<style lang="less" scoped>
.supervisors-list {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;

  .poup-box {
      width: 1407px;
      height: 860px;
      background-image: url("../../../assets/poupbg.png");
      background-size: 100% 100%;
      position: relative;
      box-sizing: border-box;
      padding: 0 48px;

      .close {
          width: 32px;
          height: 32px;
          background-image: url("../../../assets/icon_flowpages_close.png");
          background-size: 100% 100%;
          position: absolute;
          right: 50px;
          top: 56px;
          cursor: pointer;
      }

      .title {
          width: 100%;
          margin-top: 64px;
          text-align: center;
          font-family: AlimamaShuHeiTi-Bold;
          font-weight: 700;
          font-size: 32px;
      }

      .xiaiaobox {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 10px;

          .xiabiao {
              width: 234px;
              height: 2px;
          }
      }

      .check-box {
          width: 100%;
          margin-top: 30px;

          .left {
              width: 100%;
              display: flex;
              align-items: center;
              .m-2{
                  width: 164px;
                  margin-right: 12px;
              }
              .input {
                  width: 164px;
                  height: 32px;
                  border: none;
                  margin: 0;
                  background: none;
                  background-image: url("../../../assets/poup-check-bg.png");
                  background-size: 100% 100%;
                  box-sizing: border-box;
                  padding: 0 8px;
                  font-size: 14px;
                  margin-right: 16px;
                  color: white;
              }
              .input::placeholder{
                  color: dashed black;
              }

              .sexbox {
                  width: 164px;
                  height: 32px;
                  border: none;
                  margin: 0;
                  background: none;
                  background-image: url("../../../assets/poup-check-bg.png");
                  background-size: 100% 100%;
                  box-sizing: border-box;
                  padding: 0 8px;
                  font-size: 14px;
                  margin-right: 16px;
              }
          }

          .right {
              width: 100%;
              display: flex;
              align-items: center;
              margin-top: 16px;
              .setColor1 {
                  width: 86px;
                  height: 32px;
                  border: none;
                  background: none;
                  background-image: url("../../../assets/searchbtn.png");
                  background-size: 100% 100%;
                  cursor: pointer;
              }

              .setColor2 {
                  width: 86px;
                  height: 32px;
                  border: none;
                  background: none;
                  background-image: url("../../../assets/resbtn.png");
                  background-size: 100% 100%;
                  cursor: pointer;
                  margin-left: 12px;
              }
          }
      }

      .titlebox {
          width: 100%;
          height: 38px;
          background: rgba(0, 88, 255, 0.5);
          margin-top: 16px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 21px;

          .item {
              width: calc(100% / 10);
              font-size: 14px;
              color: rgba(255, 255, 255, 0.85);
          }
          .item:first-child{
            width: 60px !important;
          }
          .item:nth-child(4){
            flex: 1;
          }
      }

      .conlist {
          width: 100%;
          height: 430px;
          .item {
              width: 100%;
              margin-top: 16px;
              height: 32px;
              background-image: url("../../../assets/bg_text.png");
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              box-sizing: border-box;
              padding: 0 21px;

              .text {
                  width: calc(100% / 10);
                  font-size: 14px;
                  color: #FFFFFF;
              }
              .text:first-child{
            width: 60px !important;
          }
          .text:nth-child(4){
            flex: 1;
          }
          }
      }

      .superpagenumber {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 20px;

          .span {
              color: #ffffffd9;
              font-size: 14px;
              line-height: 40px;
              margin-right: 20px;
          }

          .my-page :deep(.el-pagination__jump) {
              color: white;
              /* 修改跳转输入框文字颜色 */
          }
      }
  }
}
.m-2 :deep(.el-select__wrapper) {
  border: none;
  background: none;
  background-image: url("../../../assets/poup-check-bg.png");
  background-size: 100% 100%;
}
.m-3{
  margin-right: 16px;
}
.m-3 :deep(.el-input__wrapper) {
  border: none;
  background: none;
  background-image: url("../../../assets/poup-check-bg.png");
  background-size: 100% 100%;
}
</style>
